<template>
    <div id="contain">
        <el-row>
            <el-col :span="14"></el-col>
            <el-col :span="9">
                <div id="form-container">
                    <div id="form-context">
                        <div id="form-title">
                            {{ useSysStore().getTitle }}
                        </div>
                        <div id="form">
                            <el-form :model="form" label-width="auto" label-position="right">
                                <el-form-item label="用户名">
                                    <el-input v-model="form.username" />
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="form.password" type="password" />
                                </el-form-item>
                                <div id="opt-group">
                                    <el-button type="primary" @click="onSubmit">登录</el-button>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="1"></el-col>
        </el-row>
    </div>
</template>

<script setup lang='ts'>
import { getUserInfo, login } from '@/api/rbacApi'
import { useSysStore } from '@/pinna/sys';
import { useUserStore } from '@/pinna/userinfo';
import router from '@/router';
import { reactive } from 'vue'


const form = reactive({
    username: '',
    password: '',
    plateForm: 'WEB_MANAGE'
})

const onSubmit = () => {
    login(form).then((res)=>{      
        //set token  
        localStorage.setItem(import.meta.env.VITE_TOKEN_VALUE,res)
        //pull userinfo  
        getUserInfo().then(res=>{
            //set store
            useUserStore().setUser(res)
            router.push({name:"index"})
        })
    })
}

</script>

<style>
#contain,
#contain>.el-row {
    height: 100%;
    background-color: gray;
}

#form-container {
    height: 100%;
    display: flex;
    align-items: center;
    /* 垂直居中 */
}

#form-context {
    background-color: white;
    transform: translateY(-25%);
    border-radius: 1rem;
    box-shadow: 1rem 1rem 1rem white;
}

#form-title {
    text-align: center;
    font-size: 1.5rem;
    padding: 1rem 0;
}

#form {
    padding: 1rem;

}

#opt-group{
    text-align: center;
}
</style>